<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>快来听听我弹的《{{title}}》</title>

    <link rel="stylesheet" href="{{url_for('static',filename='APlayer.min.css')}}">
    <style>
        html,body{
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
        body{
            max-width: 750px;
            margin: 0 auto;
            position: relative;
        }
        .bg-img{
            width: 100%;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            background-image: url("{{pic}}");
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
        }
        .bottom{
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            background-color: #f6f7f8;
            padding: 5px 0 10px;
        }
        #player{
            background-color: #fff;
            text-align: left;
        }
        .btn{
            color: #fff;
            background-color: #7a5df3;
            display: inline-block;
            padding: 9px 22px;
            border-radius: 18px;
            margin-top: 10px;
            text-decoration: none;
            font-size: 15px;
        }
        .item{
            text-align: center;
            position: relative;
        }
        .qr{
            position: absolute;
            right: 0;
            top: 0;
            width: 98px;
            text-align: center;
            margin-right: 5px;
            padding-top: 3px;
        }
        .qr img{
            width: 58%;
            display: inline-block;
            margin-bottom: -5px;
        }
        .qr p{
            font-size: 9px;
            margin: 0;
            line-height: 1.5;
        }
        @media screen and (max-width: 350px) {
            .btn{
                font-size: 14px;
            }
        }
        .bg-decode{
            display: block;
            position: absolute;
            left: 0;
            bottom: 164px;
            width: 100%;
            height: 100%;
            text-align: center;
            background: #fff;
            z-index: 1;
        }
        .bg-decode .content{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate3d(-50%, 0, 0);
            width: 100%;
        }
        .bg-decode .mask{
            height: 124px;
            width: 110px;
            background-repeat: no-repeat;
            background-size: cover;
            margin:0 auto  20px auto;
        }
        .bg-decode .desc{
            color: #666;
        }
        @media (-webkit-min-device-pixel-ratio:2), (min-device-pixel-ratio:2) {
            .bg-decode .mask{
                background-image: url('/static/decode@2x.png');
            }
        }
        @media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3) {
            .bg-decode .mask{
                background-image: url('/static/decode@3x.png');
            }
        }

        .bg-img .m-result{
            position: absolute;
            right: 0;
            bottom:164px;
            background-color: rgba(85, 82, 91, .8);
            border-bottom-left-radius: 10px;
            border-top-left-radius: 10px;
            padding: 11px 11px 10px 16px;
            box-sizing: border-box;
            overflow: hidden;
        }
        .bg-img .m-result .box {
          float: left;
          font-size: 0;
          box-sizing: border-box;
        }
        .bg-img .m-result .left {
          position: relative;
          padding-right: 14px;
          word-wrap: break-word;
          text-align: center;
          max-width: 50px;
          padding-top: 18px;
        }
        .bg-img .m-result .right {
          position: relative;
          padding-left: 12px;
        }
        .bg-img .m-result .right::before{
          content: '';
          position: absolute;
          left: 0;
          top:0;
          width: 1px;
          height: 100%;
          background-color: #666;
        }
        .bg-img .m-result .left .sec , .bg-img .m-result .right .sec {
          display: flex;
          flex-flow: column nowrap;
          align-content: space-around;
          align-items: center;
        }
        .bg-img .m-result .left .sec:first-child{
          border-bottom: 1px solid #666;
          padding-bottom: 13px;
        }
        .bg-img .m-result .left .sec:last-child {
          margin-top: 10px;
        }
        .bg-img .m-result .left .sec img {
          width: 24px;
          height: 24px;
          margin-bottom: 7px;
        }
        .bg-img .m-result .left .sec .text {
          font-size: 12px;
          color: #fff;
        }
        .bg-img .m-result .right .sec {
          box-sizing: border-box;
          padding-bottom: 12px;
          margin-top: 10px;
          position: relative;
        }
        .bg-img .m-result .right .sec::after{
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          height: 1px;
          width: 16px;
          background-color: #666;
        }
        .bg-img .m-result .right .sec:first-child{
          margin-top: 0;
        }
        .bg-img .m-result .right .sec:last-child{
          padding-bottom: 0;
        }
        .bg-img .m-result .right .sec:last-child::after{
          content: '';
          width: 0;
          height: 0;
        }
        .bg-img .m-result .right .sec.perfect {
          color: #85c227;
        }
        .bg-img .m-result .right .sec.good {
          color: #f3b112;
        }
        .bg-img .m-result .right .sec.miss {
          color: #ff5e69;
        }
        .bg-img .m-result .right .sec .score{
          font-size: 17px;
          font-weight: bold;
        }
        .bg-img .m-result .right .sec .text{
          font-size: 9px;
        }
    </style>
</head>
<body>
    <style>
        .aplayer{
            height: 90px;
        }
        .aplayer .aplayer-pic{
            height: 90px;
            width: 80px;
            background-position: 0 0;
            background-repeat: no-repeat;
            background-size: 80px 90px;
        }
        .aplayer .aplayer-pic .aplayer-button{
            width: 30px;
            height: 30px;
            border: 2px solid #000;
            background: #fff;
            top: 50%;
            left: 50%;
            margin: -16px 0 0 -17px;
            opacity: 1;
        }
        .aplayer .aplayer-pic .aplayer-play .aplayer-icon{
            position: absolute;
            top: 4px;
            left: 5px;
            height: 23px;
            width: 23px;
        }
        .aplayer .aplayer-pic .aplayer-pause .aplayer-icon{
            position: absolute;
            top: 4px;
            left: 4px;
            height: 23px;
            width: 23px;
        }
        .aplayer .aplayer-pic .aplayer-button .aplayer-fill{
            fill: #000;
        }
        .aplayer-icon{
            color: #fff;
        }
        .aplayer-icon:before{
            display: none !important;
        }
        .aplayer .aplayer-info{
            margin-left: 85px;
            margin-right: 80px;
            height: 90px;
            padding: 13px 7px 0 10px;
        }
        .aplayer .aplayer-info .aplayer-music{
            margin-bottom: 8px;
        }
        .aplayer .aplayer-info .aplayer-controller{
            display: block;
        }
        .aplayer .aplayer-info .aplayer-controller .aplayer-time{
            margin-top: 10px;
            font-size: 14px;
        }
        .aplayer .aplayer-info .aplayer-music .aplayer-author{
            font-size: 13px;
        }
    </style>
    <div class="bg-decode">
        <div class="content">
            <div class="mask"></div>
            <div class="desc">正在转码中...</div>
        </div>
    </div>
    <div class="bg-img">
        <div class="m-result">
            <div class="box left">
                <div class="sec">
                    <img src="/static/hands@2x.png" alt="">
                    <span class="text">{{ correction["hand_style"] }}</span>
                </div>
                <div class="sec">
                    <img src="/static/metronome@2x.png" alt="">
                    <span class="text">{{ correction["metronome"] }}</span>
                </div>
            </div>
            <div class="box right">
                <div class="sec perfect">
                    <span class="score">{{ correction["perfect"] }}</span>
                    <span class="text">Perfect</span>
                </div>
                <div class="sec good">
                    <span class="score">{{ correction["good"] }}</span>
                    <span class="text">Good</span>
                </div>
                <div class="sec miss">
                    <span class="score">{{ correction["miss"] }}</span>
                    <span class="text">Miss</span>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="item">
                <div class="qr">
                    <img src="{{url_for('static',filename='qcode.png')}}">
                    <p>长按识别二维码</p>
                    <p>了解The ONE智能钢琴</p>
                </div>
                <div id="player" class="aplayer"></div>
            </div>
            <div class="item">
                <a class="btn" href="http://www.1tai.com/download-smartpiano.html">打开The ONE智能钢琴APP,我也试试</a>
            </div>
        </div>
    </div>
    <script src="/static/APlayer.min.js"></script>
    <script>
        var el = document.querySelector('.bg-decode')
        var timer = setTimeout(() => {
            xmlHttp("{{mp3}}")
        }, 1000)
        function xmlHttp(url) {
            var xml = new XMLHttpRequest()
            xml.open('get', url, true)
            xml.send(null)
            xml.onreadystatechange = function () {
                if (xml.readyState === 4) {
                    if (xml.status !== 404) {
                        clearTimeout(timer)
                        timer = null
                        el.style.display = 'none'
                        el.style.transitionDelay = '300ms'
                        el.style.transitionDuration = '300ms'
                    }
                }
            }
        }

        var player = new APlayer({
            element: document.getElementById('player'),
            narrow: false,
            autoplay: false,
            showlrc: false,
            preload: 'auto',
            mode: 'loop',
            music: {
                title: "{{title}}",
                author: "{{author}}",
                url: "{{correction['mp3']}}",
                pic: "{{url_for('static', filename='backend2.png')}}"
            }
        })
        player.init()

        xmlHttp("{{correction['mp3']}}")
    </script>
</body>
</html>